﻿.blog-page{

    .single_post {
        -webkit-transition: all .4s ease;
        transition: all .4s ease;

        .img-post {
            position: relative;
            overflow: hidden;            
            max-height: 500px;

            > img {
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                opacity: 1;
                -webkit-transition: -webkit-transform .4s ease, opacity .4s ease;
                transition: transform .4s ease, opacity .4s ease;
                max-width: 100%;
                filter: none;
                -webkit-filter: grayscale(0);
                -webkit-transform: scale(1.01);
            }
           

            &:hover{

                img{
                    -webkit-transform: scale(1.02);
                    -ms-transform: scale(1.02);
                    transform: scale(1.02);
                    opacity: .7;
                    filter: gray; /* IE5+ */
                    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
                    -webkit-transition: all .8s ease-in-out;
                }

                .social_share{
                    display: block;
                }
            }

            .social_share{
                position: absolute;
                bottom: 10px;
                left: 10px;
                display: none;
            }            
        }        

        .meta{
            list-style: none;            
            padding: 0;
            margin: 0;
            li{
                display: inline-block;
                margin-right: 15px;

                a {
                    font-style: italic;
                    color: #959595;                    
                    text-decoration: none;
                    font-size: 12px;

                    i {
                        margin-right: 6px;
                        font-size: 12px;
                    }
                }
            }
        }

        h3 {
            font-size: 20px;
            line-height: 26px;
            -webkit-transition: color .4s ease;
            transition: color .4s ease;            

            a {               
                color: #242424;
                text-decoration: none;
            }
        }
        p{
            font-size: 15px;
        }

        .blockquote{
            p {
                margin-top: 0 !important;
            }
        }        
    }

    .right-box {
        .popular-post{
            ul{                
                li{
                    margin-bottom: 15px;
                    &:last-child{
                        margin-bottom: 0;
                    }
                    h5{
                        font-size: 18px;
                        a{                        
                            color: #333;
                        }
                    }
                    .author-name, .date{
                       display: block;
                    }
                }
            }            
        }
        .tag-clouds{
            ul {
                li {                    
                    display: inline-block;
                    
                }
            }
        }
        .instagram-plugin{
            overflow: hidden;
            li {
                float: left;               
                overflow: hidden;
                width: 24.89%;
                border: 1px solid #fff;
            }
        }
    }

    .comment-reply{
        li{
            margin-bottom: 10px;
            &:last-child{
                margin-bottom: none;
            }
            h5{
                font-size: 17px;
            }

            p{
                margin-bottom: 0px;
                font-size: 15px;
                color: #777;
            }
        }
        .list-inline{
            li{
                display: inline-block;
                margin: 0;
                padding-right: 20px;
                a{
                    font-size: 13px;
                }
            }
        }
       
    }

}

.page.with-sidebar.right .left-box {
    margin-right: -20px;
}

/*  end Blog page*/

  
@media (max-width: 414px) {
    .section.blog-page {
        padding: 20px 0;
    }
    .blog-page{        

        .left-box {

            .single-comment-box{
                > ul{
                    > li {
                        padding: 25px 0;
                    }
                }                
            
                ul{
            
                    li{
                        .icon-box {
                            display: inline-block;
                        }

                        .text-box {
                            display: block;
                            padding-left: 0;
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    }
}